{extend name="public/layout"}

{block name="assign"}
{assign name="page_title" value="网站配置排序" /}
{/block}

{block name="head"}
<style type="text/css">
	[data-sortable] {
		height: 280px;
		overflow-y: auto;
		padding: 0;
		position: static;
	}

	[data-sortable] li {
		padding: 10px;
		cursor: move;
	}

	[data-sortable] li:not(:last-child) {
		border-bottom: 1px solid #DCDCDC;
	}

	.ui-sortable-helper {
		background-color: rgba(0, 0, 0, 0.2);
	}
</style>
{/block}

{block name="body"}
<form action="{:url()}" method="post" class="layui-form" lay-filter="action">
	<input type="hidden" name="http_referer" value="{$Request.server.HTTP_REFERER|default=''}"/>

	<div class="layui-form-item layui-col-space15" id="sort-container" data-masonry>
		{volist name="group" id="data"}
		<div class="layui-col-sm6 layui-col-md4 layui-col-lg2">
			<div class="layui-card hoverable">
				<div class="layui-card-header">{$key}</div>
				<ul class="layui-card-body" data-sortable='{group:"setting-sort"}'>
					{volist name="data" id="vo"}
					<li class="xr-list-item" data-id="{$vo.id}">
						<span class="fa fa-arrows"></span> {$vo.title}
					</li>
					{/volist}
				</ul>
			</div>
		</div>
		{/volist}
	</div>

	<div class="layui-form-item">
		<div class="layui-input-inline">
			<button type="submit" class="layui-btn layui-btn-danger"
					data-ajax-post="{target:'.layui-form',onRequest:onRequestData}">
				<i class="fa fa-save"></i> 保存
			</button>
			<a href="javascript:history.back();" class="layui-btn layui-btn-primary">取消 </a>
		</div>
	</div>
</form>
{/block}

{block name="foot"}
<script src="https://cdn.bootcss.com/masonry/4.2.0/masonry.pkgd.min.js"></script>
<script type="text/javascript">
function onRequestData() {
	var ids = [];
	$('#sort-container').find('[data-sortable]').each(function() {
		ids.push($(this).sortable('toArray', {attribute: 'data-id'}));
	});
	return {ids: ids};
}
</script>
{/block}
